<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>广告分类管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini"  >
<!-- .box-body -->

<div class="box-header with-border">
	<h3 class="box-title">广告分类管理</h3>
</div>

<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()" ><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i class="fa fa-check"></i> 开启</button>
					<button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i class="fa fa-ban"></i> 屏蔽</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">
				名称：<input name="name" id="name">	<button class="btn btn-default" onclick="getData()" >查询</button>
			</div>
		</div>
		<!--工具栏/-->

		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>
				<th class="" style="padding-right:0px">
					<input id="selall" type="checkbox" class="icheckbox_square-blue">
				</th>
				<th class="sorting_asc">分类ID</th>
				<th class="sorting">分类名称</th>
				<th class="sorting">分组</th>
				<th class="sorting">KEY</th>
				<th class="sorting">状态</th>
				<th class="text-center">操作</th>
			</tr>
			</thead>
			<tbody id="thody_id">
			<!--数据展示-->
			</tbody>
		</table>
		<div th:insert="page.html"></div>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 分页 -->


<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">广告分类编辑</h3>
			</div>
			<form id="addForm">
				<div class="modal-body">

					<table class="table table-bordered table-striped"  width="800px">
						<tr>
							<td>分类名称</td>
							<td><input  class="form-control" name="name" placeholder="分类名称">  </td>
						</tr>
						<tr>
							<td>分组</td>
							<td><input  class="form-control" placeholder="分组">  </td>
						</tr>
						<tr>
							<td>KEY</td>
							<td><input  class="form-control" placeholder="KEY">  </td>
						</tr>
						<tr>
							<td>是否有效</td>
							<td>
								<input type="checkbox" class="icheckbox_square-blue" >
							</td>
						</tr>
					</table>

				</div>
				<div class="modal-footer">
					<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addInfo()">保存</button>
					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- 编辑窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel2">广告分类编辑</h3>
			</div>
			<form id="updateForm">
				<div class="modal-body">
					<input type="hidden" name="id" id="id">
					<table class="table table-bordered table-striped"  width="800px">
						<tr>
							<td>分类名称</td>
							<td><input  class="form-control" name="name" id="updateName" placeholder="分类名称">  </td>
						</tr>
						<tr>
							<td>分组</td>
							<td><input  class="form-control" placeholder="分组">  </td>
						</tr>
						<tr>
							<td>KEY</td>
							<td><input  class="form-control" placeholder="KEY">  </td>
						</tr>
						<tr>
							<td>是否有效</td>
							<td>
								<input type="checkbox" class="icheckbox_square-blue" >
							</td>
						</tr>
					</table>

				</div>
				<div class="modal-footer">
					<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateInfo()">保存</button>
					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
	//页面加载函数
	$(function (){
		getData();
	})
	function getData(){
		$.ajax({
			url:"/conCateController/categoryList",
			type:"post",
			data:{pageNum:$("#pageNum").val(),pageSize:$("#pageSize").val(),name:$("#name").val()},
			dataType:"json",
			async:true,
			success:function (result){
				var page = result.data;
				var list = page.rows;
				var table = "";
					for (let i = 0; i < list.length; i++) {
						table+="<tr>\n" +
								"<td><input name='box' value="+list[i].id+" type=\"checkbox\" ></td>\n" +
								"<td>"+list[i].id+"</td>\n" +
								"<td>"+list[i].name+"</td>\n" +
								"<td>首页广告</td>\n" +
								"<td>index</td>\n" +
								"<td>\n" +
								"<span>无效</span>\n" +
								"<span>有效</span>\n" +
								"</td>\n" +
								"<td class=\"text-center\">\n" +
								"<button type=\"button\" class=\"btn bg-olive btn-xs\" data-toggle=\"modal\" onclick='toUpdate("+ list[i].id +")' data-target=\"#updateModal\" >修改</button>\n" +
								"</td>\n" +
								"</tr>"
					}
					$("#thody_id").html(table);
					buildPage(page)
			},
		})
	}
	//新增
	function addInfo(){
		$.ajax({
			url:"/conCateController/increase",
			type:"post",
			data:$("#addForm").serialize(),
			dataType:"json",
			asnyc:true,
			success:function (result){
				if (result.code==10000){
					alert("增加成功")
					window.location.reload();
				}
			},
			
		})
	}
	//回显,
	function toUpdate(id){
		//alert(id)
		$.ajax({
			url:"/conCateController/toUpdate/"+id,
			type:"post",
			dataType:"json",
			async:true,
			success:function (result){
				var list = result.data;
				$("[name=id]").val(list.id);
				$("[name=name]").val(list.name)
			},
		})
	}
	//修改
	function updateInfo(){
		$.ajax({
			url:"/conCateController/updateInfo",
			type:"post",
			data:$("#updateForm").serialize(),
			dataType:"json",
			async:true,
			success:function (result){
				if (result.code==10000){
					alert("修改成功")
					window.location.reload();
				}
			},
		})
	}
	//批量删除
	function deleteAll(){
		var ids = [];
		var boxs = $("[name=box]:checked")
		$(boxs).each(function (i,e){
			ids.push(e.value)
		})
		if (confirm("确认删除吗?")){
			$.ajax({
				url:"/conCateController/deleteBatch/"+ids,
				type:"post",
				dataType:"json",
				async:true,
				success:function (result){
					if (result.code==10000){
						alert("删除成功")
						window.location.reload();
					}
				},
			})
		}
	}
</script>

</body>

</html>